<template>
  <div ref="containerRef" class="common-page detail">
    <title-view title="在册信息" icon="item-register"></title-view>
    <div class="common-item-view">
      <t-row :gutter="[0, 16]">
        <t-col v-for="(item, index) in list" :key="index" :span="item.key === 'desc' ? 12 : 4">
          <div class="item">
            <div class="label" style="width: 100px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="custom-wrap">
      <title-view title="自定义参数配置" icon="item-register"></title-view>
      <svg-icon class="custom-icon" name="item-questionMark"></svg-icon>
    </div>
    <div class="common-item-view">
      <t-row :gutter="[0, 30]">
        <t-col v-for="(item, index) in customList" :key="index" :span="12">
          <div class="item">
            <div class="label" style="width: 100px; text-align: end; margin-right: 36px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { tryit } from 'radash';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import mockApi from '@/api/mock';
import { ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useLoading } from '@/hooks/useLoading';
import { setKvViewData } from '@/utils';

import { INIT_FORM_LIST, CUSTOM_list } from './datas/detail';

const route = useRoute();

const containerRef = ref<HTMLDivElement>();
const list = ref(_.cloneDeep(INIT_FORM_LIST));
const customList = ref(_.cloneDeep(CUSTOM_list));

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  const changeData = {
    name: '人脸识别',
    authorization: 1,
    version: 'v1.0.0',
    dataInfo: '算法支持人脸识别、人形识别、人脸对比',
    desc: 'IPC-1001',
  };
  list.value = setKvViewData(list.value, { ...data, ...changeData });
  const cutomData = {
    min_px: 200,
    confidence: 60,
    score: 20,
    matching: 30,
    proportion: 50,
    interval: 40,
  };
  customList.value = setKvViewData(customList.value, { ...data, ...cutomData });
};

const getData = async () => {
  loadingStart();
  const id = route.query.id as string;
  const [err, res] = await tryit(mockApi.info)({ id });
  if (!err && res.code === SUCCESS_CODE) setData(res.data);
  loadingEnd();
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.custom-wrap {
  display: flex;
  align-items: center;
  .custom-icon {
    margin-left: 13px;
    margin-bottom: 10px;
  }
}
.custom-label {
  text-align: end;
  margin-right: 36px;
}
.custom-value {
  display: flex;
  .slider-label {
    display: inline-block;
    height: 18px;
    color: #333333;
    font-size: 12px;
    line-height: 18px;
    padding: 0 5px;
    background-color: #d2e1fc;
    border-radius: 3px;
  }
  .slider-wrap {
    width: 410px;
    height: 10px;
    :deep(.t-slider__rail) {
      height: 10px;
      background-color: #f0f2f4;
      .t-slider__track {
        height: 100%;
      }
    }
  }
}
</style>
